<template>

    <div class="login_container">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avatar_box">
                <img src="../assets/hhp2.jpg" alt="touxiang">
            </div>
            <!-- 登录表单区 -->
            <el-form ref='loginFormRef' :model="loginForm" :rules="loginFormRules" class='login_form'>
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item class="btn">
                    <el-button type="primary" round @click="login">login</el-button>
                    <el-button type="info" round @click="resetLoginForm">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'Login',
        data() {
            return {
                loginForm: {
                    username: 'admin',
                    password: '123456'
                },
                //表单验证规则对象
                loginFormRules: {
                    username: [{ required: true, message: '请输入登录名称', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入登录密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }]
                }
            }
        },
        methods: {
            resetLoginForm() {
                this.$refs.loginFormRef.resetFields()
            },
            login() {
                this.$refs.loginFormRef.validate(async v => {
                    if (!v) return;
                    const { data: res } = await this.$http.post('login', this.loginForm);
                    if (res.meta.status !== 200) return this.$message.error('登录失败！');
                    this.$message.success('登录成功！');
                    window.sessionStorage.setItem('token', res.data.token);
                    this.$router.push('/home')
                })

            }

        },
    }
</script>

<style scoped>
    .login_container {
        background: url(../assets/02.jpg) no-repeat;
        background-size: cover;
        height: 100%;
    }

    .login_box {
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 10px #000;
    }

    .avatar_box {
        z-index: 1;
        height: 120px;
        width: 120px;
        border: 1px solid #eee;
        border-radius: 50%;
        overflow: hidden;
        /* padding: 5px 5px 5px 5px; */
        box-shadow: 0 0 10px rgb(15, 14, 14);
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);

    }

    .avatar_box img {
        width: 100%;
        height: 100%;
        background-color: #ccc;

    }

    .btn {
        display: flex;
        justify-content: end;
        /* flex-direction: column; */
    }

    .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
    }
</style>